<template>
	<view>
		<div class="booking-container">
			<table class="booking-table">
				<thead>
					<tr class="head">
						<div class="month-display" style="padding: 4px;">{{month}}
							<p style="margin-top:3px;">月</p>
						</div>
						<td v-for="(date, index) in weekDates" :key="index" :class="{'today-cell': isToday(date) }">
							<!--根据是否为今天设置星期文字颜色 -->
							<div class="weekday-display" :style="{ color: isToday(date)? 'white' : '' }">
								{{ getWeekday(date) }}
							</div>
							<!-- 添加内联样式，根据是否为今天设置日期文字颜色 -->
							<div class="day-display" :style="{ color: isToday(date)? 'white' : '' }">
								{{ isToday(date) ? '今天' : getDay(date) }}
							</div>
							<!-- <div class="weekday-display">{{ getWeekday(date) }}</div>
							<div class="day-display">{{ isToday(date) ? '今天' : getDay(date) }}</div> -->
						</td>
					</tr>
				</thead>
			</table>
			<view class="flex justify-start bg-white date-columns-container">
				<view class="flex  justify-start bg-white">
					<view class="leftcontainer" :style="leftContainerStyle">
						<!-- 左侧时间轴 -->
						<view v-for="(time, index) in timeAxis" :key="index" class="ev-fc-start chuizhijuz">
							<text class="classTimeText">{{ time }}</text>
						</view>
					</view>
					<!-- 骨架屏 -->
					<template v-if="isLoading">
						<view v-for="(date, dateIndex) in weekDates" :key="dateIndex" class="date-column">
							<div v-for="(item, itemIndex) in generateSkeletonItems()" :key="itemIndex"
								class="skeleton-item">
								<div class="skeleton-animation" :style="getRandomTimeBlockStyle(dateIndex, itemIndex)"></div>
							</div>
						</view>
					</template>
					<!-- 真实数据 -->
					<template v-else>
						<!-- 遍历一周的日期 -->
						<view v-for="(date, dateIndex) in weekDates" :key="dateIndex" class="date-column">
							<!-- 遍历每个时间段 -->
							<div v-for="(item, itemIndex) in getBookingsForDate(date)" :key="itemIndex"
								@click="handleTimeSlotClick(item)">
								<!-- 获取当前时间段的信息 -->
								<div :class="{ 
						            'expired': isDateExpired(item.beginTime, date), 
						            'booked': item.stock === 0 && !isDateExpired(item.beginTime, date), 
						            'available': item.stock > 0 && !isDateExpired(item.beginTime, date)
						        }" :style="{ 
						            height: getTimeRangeHeight(item.beginTime, item.endTime) + 'px', 
						            marginTop: getTimeRangeMargin(getBookingsForDate(date), item.beginTime) + 'px' 
						        }">
									<span class="time-text start-time">{{ formatTime(item.beginTime) }}</span>
									<span v-if="isDateExpired(item.beginTime, date)" class="center-text">已过期</span>
									<span v-else-if="item.stock === 0" class="center-text">已约满</span>
									<span v-else class="center-text">
										￥{{ item.price }}
									</span>
									<span class="time-text end-time">{{ formatTime(item.endTime) }}</span>
								</div>
							</div>
							<div v-if="getBookingsForDate(date).length > 0"
								:style="{ height: getLastIntervalHeight(getBookingsForDate(date)) + 'px' }"></div>
						</view>
					</template>
				</view>
			</view>
		</div>
		<!-- uView Popup 抽屉组件 -->
		<u-popup :show="show" mode="bottom" :duration="300" @close="close" @open="open" :round="16"
			:safeAreaInsetTop="true">
			<view class="popup-content">
				<!-- 库存显示 -->
				<view class="info-row">
					<view class="info-item">
						<text class="info-label">库存: </text>
						<text class="info-value">{{ stock }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">日期: </text>
						<text class="info-value">{{ currentDate }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">时间: </text>
						<text class="info-value">{{ timeRange }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">价格: </text>
						<text class="info-value">￥{{ price }}</text>
					</view>
				</view>
				<!-- 场号列表 -->
				<view class="court-list">
					<view v-for="(status, index) in bookedList" :key="index"
						:class="['court-item', { 'booked': status === 1, 'available': status === 0, 'selected': index === selectedCourtIndex}]"
						@click="selectCourt(index)">
						{{ index + 1 }} <!-- 场号从1开始 -->
					</view>
				</view>
				<!-- 预订按钮 -->
				<view class=" button-container">
					<button @click="randomReserve(currentTimePeriodId)"
						style="font-size: 15px;border-radius: 20rpx;background-color: #FF9500; color:white; font-weight: 600;">一键预定</button>
					<button @click="reserve(selectedCourtIndex, currentTimePeriodId)"
						style="font-size: 15px;border-radius: 20rpx; background-color: #00aaff;color:white; font-weight: 600;">自主预定</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		BookById
	} from '@/api/book/book.js';
	import {
		reserve1
	} from '@/api/book/reserve.js';
	import {
		getOrderRespDTOByOrderSn
	} from '@/api/book/order.js';
	export default {
		onLoad(options) {
			const id = options.id;
			this.id = id;
			console.log('接收到的分区场馆 id:', id);
			if (id) {
				console.log('分区场馆 id 成功传输到 book 页面');
			} else {
				console.error('未接收到分区场馆 id');
			}
			const selectedDate = options.date;
			this.selectedDate = this.getTodayDate();
			console.log('接收到的默认日期:', selectedDate);
			this.generateWeekDates(this.selectedDate);
			console.log('一周的日期列表:', this.weekDates);
			this.fetchBookData(id, this.selectedDate);
			const [year, month] = this.selectedDate.split('-');
			this.yearMonth = `${year}年${month}月`;
			this.month = `${month}`;
			this.getScreenHeight();
			this.getLocationInfo();
		},
		data() {
			return {
				id: undefined,
				selectedDate: '',
				weekDates: [],
				venueBookData: [],
				yearMonth: '',
				month: '',
				screenHeight: 0,
				timeAxis: this.generateTimeAxis(), // 生成左侧时间轴
				totalTimeSpan: 14 * 60,
				// beginTime: '8:00',
				// endTime: '22:00',
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				windowHeight: this.windowHeight,
				screemWidth: this.screenWidth,
				timeRangeList: [],
				classTime: [], // 处理后的数据
				leftContainerStyle: '', // 存储左侧时间轴容器的样式
				earliestTime: null, // 最早时间
				latestTime: null, // 最晚时间
				isLoading: true, //骨架屏显示状态
				show: false, //弹出层显示状态
				stock: 0,
				bookedList: [],
				selectedCourtIndex: null, // 选中的场馆索引
				currentTimePeriodId: null, // 当前时间段的 id
				isReservedSuccess: false, // 预定成功状态
				isReservedSuccessPopup: false, // 预定成功弹出层显示状态
				totalCourts: 0, // 总场馆数字段
				currentDate: '', // 当前选中日期
				timeRange: '', // 时间段
				price: 0, // 价格
			};
		},

		methods: {
			    getRandomTimeBlockStyle(dateIndex, itemIndex) {
			        // 随机生成时间段（08:00-22:00之间）
			        const startHour = 8 + Math.floor(Math.random() * 12); // 8-19点
			        const duration = 2 + Math.floor(Math.random() * 1); // 1-3小时
			        const endHour = Math.min(startHour + duration, 22);
			        
			        // 格式化为HH:MM
			        const startTime = `${startHour.toString().padStart(2, '0')}:${Math.random() > 0.5 ? '00' : '30'}`;
			        const endTime = `${endHour.toString().padStart(2, '0')}:${Math.random() > 0.5 ? '00' : '30'}`;
			        
			        // 添加随机垂直间距
			        const verticalMargin = 5 + Math.floor(Math.random() * 15); // 5-20px
			        
			        return {
			            height: this.getTimeRangeHeight(startTime, endTime) + 'px',
			            marginTop: this.getTimeRangeMargin([], startTime) + 'px',
			            backgroundColor: '#e0e0e0',
			            borderRadius: '8rpx',
			            margin: `${verticalMargin}px 2px`,
			            boxShadow: '0 2px 2px rgba(0,0,0,0.1)',
			            opacity: 0.8 + Math.random() * 0.1 // 轻微随机透明度
			        }
			    },
			generateTimeAxis() {
				// const timeAxis = [];
				// for (let hour = 8; hour <= 22; hour++) {
				// 	timeAxis.push(`${hour.toString().padStart(2, '0')}:00`);
				// }
				// return timeAxis;
				const startHour = this.earliestTime ? this.earliestTime.getHours() : 8;
				const endTime = this.latestTime ? new Date(this.latestTime) : new Date(0, 0, 0, 22);
				// 确保最晚时间向上取整
				if (endTime.getMinutes() > 0 || endTime.getSeconds() > 0 || endTime.getMilliseconds() > 0) {
					endTime.setHours(endTime.getHours() + 1);
				}
				endTime.setMinutes(0);
				endTime.setSeconds(0);
				endTime.setMilliseconds(0);
				const endHour = endTime.getHours();

				const timeAxis = [];
				for (let hour = startHour; hour <= endHour; hour++) {
					timeAxis.push(`${hour.toString().padStart(2, '0')}:00`);
				}
				return timeAxis;
			},
			getTodayDate() {
				const date = new Date();
				return new Intl.DateTimeFormat('zh-CN', {
					year: 'numeric',
					month: '2-digit',
					day: '2-digit'
				}).format(date).replace(/\//g, '-');
			},
			generateWeekDates(selectedDate) {
				const selected = new Date(selectedDate);
				this.weekDates = Array.from({
					length: 7
				}, (_, i) => {
					const current = new Date(selected);
					current.setDate(selected.getDate() + i);
					return new Intl.DateTimeFormat('zh-CN', {
						year: 'numeric',
						month: '2-digit',
						day: '2-digit'
					}).format(current).replace(/\//g, '-');
				});
			},
			getMonthDay(date) {
				const dayOfWeek = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][new Date(date).getDay()];
				const [_, month, day] = date.split('-');
				return `${dayOfWeek} ${month}/${day}`;
			},
			getMonth(date) {
				return date.split('-')[1];
			},
			getDay(date) {
				return date.split('-').slice(1).join('-');
			},
			getWeekday(date) {
				const dayOfWeek = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][new Date(date).getDay()];
				return dayOfWeek;
			},
			isToday(date) {
				return date === this.getTodayDate();
			},
			formatTime(time) {
				const [hour, minute] = time.split(':');
				const date = new Date(0, 0, 0, hour, minute);
				return new Intl.DateTimeFormat('zh-CN', {
					hour: '2-digit',
					minute: '2-digit'
				}).format(date);
			},
			async fetchBookData(id, selectedDate) {
				try {
					const allData = [];
					this.generateWeekDates(selectedDate);
					for (const date of this.weekDates) {
						const listTimePeriodByDateRepDTO = {
							partitionId: id,
							date: date
						};
						const response = await BookById(listTimePeriodByDateRepDTO);
						allData.push(...response.data);
					}
					this.venueBookData = allData;
					// 找出最早和最晚时间
					let earliestTime = null;
					let latestTime = null;
					allData.forEach(item => {
						const startTime = new Date(0, 0, 0, ...item.beginTime.split(':').map(Number));
						const endTime = new Date(0, 0, 0, ...item.endTime.split(':').map(Number));
						if (!earliestTime || startTime < earliestTime) {
							earliestTime = startTime;
						}
						if (!latestTime || endTime > latestTime) {
							latestTime = endTime;
						}
					});

					// 向下取整最早时间，向上取整最晚时间
					earliestTime.setMinutes(0);
					if (latestTime.getMinutes() > 0) {
						latestTime.setHours(latestTime.getHours() + 1);
					}
					latestTime.setMinutes(0);
					this.earliestTime = earliestTime;
					this.latestTime = latestTime;
					console.log("最早时间", earliestTime)
					console.log("最晚时间", latestTime)
					// 计算总时间跨度
					this.totalTimeSpan = (latestTime - earliestTime) / (1000 * 60);
					// 重新生成时间轴
					this.timeAxis = this.generateTimeAxis();
					// 数据加载完成后，更新布局
					this.getScreenHeight();
					await this.getTimeRangeMargin();
					await this.getTimeRangeHeight();
				} catch (error) {
					// console.error('获取预订数据失败:', error);
				} finally {
					this.isLoading = false; // 数据加载完成，关闭加载状态
				}
			},
			getBookingsForDate(date) {
				return this.venueBookData.filter(item => item.periodDate === date);
			},
			getScreenHeight() {
				// this.screenHeight = window.innerHeight;
				this.screenHeight = document.documentElement.clientHeight || window.innerHeight;
				// 根据总时间跨度设置左侧时间轴容器的高度
				const timeRangeHeight = (this.totalTimeSpan/ totalTimeSpan) * this.screenHeight;
				this.leftContainerStyle = `height: ${timeRangeHeight}px;`;
				// this.leftContainerStyle = `height: ${this.totalTimeSpan}px;`; // 设置左侧时间轴容器的高度
			},
			getTimeRangeMargin(bookings, startTime) {
				// 对当天的预订数据按开始时间排序
				const sortedBookings = bookings.sort((a, b) => {
					const aStart = new Date(0, 0, 0, ...a.beginTime.split(':').map(Number));
					const bStart = new Date(0, 0, 0, ...b.beginTime.split(':').map(Number));
					return aStart - bStart;
				});

				let prevEndTime = this.earliestTime ? `${this.earliestTime.getHours().toString().padStart(2, '0')}:00` :
					'08:00';
				for (const booking of sortedBookings) {
					if (booking.beginTime === startTime) {
						break;
					}
					prevEndTime = booking.endTime;
				}

				const [prevEndHour, prevEndMinute] = prevEndTime.split(':').map(Number);
				const [startHour, startMinute] = startTime.split(':').map(Number);
				const prevEndTimeObj = new Date(0, 0, 0, prevEndHour, prevEndMinute);
				const startTimeObj = new Date(0, 0, 0, startHour, startMinute);
				const offset = (startTimeObj - prevEndTimeObj) / (1000 * 60);

				return (offset / this.totalTimeSpan) * this.screenHeight;
			},
			// 如果是最后一个时间段，计算到最晚时间的间隔
			getLastIntervalHeight(bookings) {
				if (bookings.length === 0) {
					return 0;
				}
				const sortedBookings = bookings.sort((a, b) => {
					const aStart = new Date(0, 0, 0, ...a.beginTime.split(':').map(Number));
					const bStart = new Date(0, 0, 0, ...b.beginTime.split(':').map(Number));
					return aStart - bStart;
				});
				const lastEndTimeObj = new Date(0, 0, 0, ...sortedBookings[sortedBookings.length - 1].endTime.split(':')
					.map(Number));
				const latestTimeObj = this.latestTime;
				const lastOffset = (latestTimeObj - lastEndTimeObj) / (1000 * 60);
				return (lastOffset / this.totalTimeSpan) * this.screenHeight;
			},
			// 计算时间段的边距
			// getTimeRangeMargin(startTime) {
			//     const [startHour, startMinute] = startTime.split(':').map(Number);
			//     const earliestStart = new Date(0, 0, 0, 8);
			//     const startTimeObj = new Date(0, 0, 0, startHour, startMinute);
			//     const offset = (startTimeObj - earliestStart) / (1000 * 60);
			//     return (offset / this.totalTimeSpan) * this.screenHeight;
			// },

			// 计算时间段的高度
			getTimeRangeHeight(startTime, endTime) {
				// const [startHour, startMinute] = startTime.split(':').map(Number);
				// const [endHour, endMinute] = endTime.split(':').map(Number);
				// const startTimeObj = new Date(0, 0, 0, startHour, startMinute);
				// const endTimeObj = new Date(0, 0, 0, endHour, endMinute);
				// const duration = (endTimeObj - startTimeObj) / (1000 * 60);
				// return (duration / this.totalTimeSpan) * this.screenHeight;

				const [startHour, startMinute] = startTime.split(':').map(Number);
				const [endHour, endMinute] = endTime.split(':').map(Number);
				const startTimeObj = new Date(0, 0, 0, startHour, startMinute);
				const endTimeObj = new Date(0, 0, 0, endHour, endMinute);
				const duration = (endTimeObj - startTimeObj) / (1000 * 60);
				return (duration / this.totalTimeSpan) * this.screenHeight;
			},
			isDateExpired(time, date) {
				const currentDateTime = new Date();
				const [year, month, day] = date.split('-');
				const [hour, minute] = time.split(':');
				const targetDateTime = new Date(year, month - 1, day, hour, minute);
				return targetDateTime < currentDateTime;
			},
			getLocationInfo() {
				let self = this;
				const query = uni.createSelectorQuery().in(self);
				query.select('#contentView').boundingClientRect(function(rect) {
					console.log('获取组件高度');
					self.viewHeight = rect.height;
					console.log(self.viewHeight);
					console.log('获取组件高度');
				}).exec();
				query.select('#leftView').boundingClientRect(function(rect) {
					console.log('获取左时间轴组件高度');
					self.leftViewHeight = rect.height;
					console.log(self.leftViewHeight);
					console.log('获取左时间轴组件高度');
				}).exec();
			},
			scroll: function(e) {
				console.log(e);
				this.old.scrollTop = e.detail.scrollTop;
			},
			formateDate(time) {
				let year = time.getFullYear();
				let month = time.getMonth() + 1 < 10 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1);
				let day = time.getDate() < 10 ? '0' + time.getDate() : time.getDate();
				return year + '-' + month + '-' + day;
			},
			getVenueInfo(date, time) {
				const [inputHour, inputMinute] = time.split(':').map(Number);
				const venue = this.venueBookData.find(item => {
					if (typeof item.beginTime === 'string' && typeof item.endTime === 'string') {
						const [startHour, startMinute] = item.beginTime.split(':').map(Number);
						const [endHour, endMinute] = item.endTime.split(':').map(Number);
						// 检查输入时间是否在时间段内
						return item.periodDate === date &&
							(inputHour > startHour || (inputHour === startHour && inputMinute >= startMinute)) &&
							(inputHour < endHour || (inputHour === endHour && inputMinute <= endMinute));
					}
					return false;
				});
				if (venue) {
					// 检查库存和价格字段是否存在
					if (!venue.stock) {
						// console.warn(`未找到库存信息，日期: ${date}, 时间: ${time}`);
					}
					if (!venue.price) {
						// console.warn(`未找到价格信息，日期: ${date}, 时间: ${time}`);
					}
					return venue;
				}

				return {};
			},
			getDateByDayOfWeek(dayOfWeek) {
				const today = new Date();
				const currentDayOfWeek = today.getDay();
				const diff = dayOfWeek - currentDayOfWeek;
				const targetDate = new Date(today);
				targetDate.setDate(today.getDate() + diff);
				return new Intl.DateTimeFormat('zh-CN', {
					year: 'numeric',
					month: '2-digit',
					day: '2-digit'
				}).format(targetDate).replace(/\//g, '-');
			},
			generateSkeletonItems() {
				// 可以根据实际情况调整骨架屏的数量
				return Array.from({
					length: 4
				}, (_, i) => i);
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			// handleTimeSlotClick(item) {
			// 	if (item.stock > 0 && !this.isDateExpired(item.beginTime, item.periodDate)) {
			// 		// 更新弹出层需要显示的数据
			// 		this.stock = item.stock;
			// 		this.bookedList = new Array(item.stock).fill(false);
			// 		// 显示弹出层
			// 		this.show = true;
			// 	}
			// },
			handleTimeSlotClick(item) {
				if (item.stock > 0 && !this.isDateExpired(item.beginTime, item.periodDate)) {
					this.stock = item.stock;
					// this.bookedList = new Array(item.stock).fill(false);
					// 使用后端返回的bookedList
					this.bookedList = item.bookedList;
					// 计算总场馆数
					this.totalCourts = item.bookedList.length;
					this.currentDate = item.periodDate;
					this.timeRange = `${this.formatTime(item.beginTime)}-${this.formatTime(item.endTime)}`;
					this.price = item.price;
					this.show = true;
					this.currentTimePeriodId = item.id; // 记录当前时间段的 id
					this.selectedCourtIndex = null; // 重置选中的场馆索引
				}
			},
			selectCourt(index) {
				if (this.bookedList[index] == 1) {
					uni.showToast({
						title: '该场地已被预订',
						icon: 'none',
						duration: 2000
					});
				} else {
					this.selectedCourtIndex = index; // 记录选中的场馆索引
				}
			},
			async randomReserve(timePeriodId) {
				try {
					const courtIndex = -1;
					const response = await reserve1(timePeriodId, courtIndex);
					console.log('随机预定成功:', response);
					// 显示成功提示框
					uni.showToast({
						title: '预订成功！',
						icon: 'success',
						duration: 2000 // 提示框显示的时间，单位为毫秒
					});
					const orderSn = response.data.orderSn;
					console.log('orderSn:', orderSn); // 打印 orderSn 进行检查
					// 跳转到订单页面并传递 orderSn
					uni.navigateTo({
						url: `/pages/book/order?orderSn=${orderSn}`
					});
					// 更新预定状态
					this.isReservedSuccess = true;
					// 显示新的弹出层
					this.isReservedSuccessPopup = true;
					// 刷新页面数据
					this.fetchBookData(this.id, this.selectedDate);
					// 更新场馆预订状态
					this.bookedList[courtIndex] = 1;
					// 关闭弹出层
					this.show = false;
				} catch (error) {
					console.error('随机预定失败:', message);
					uni.showToast({
						title: '预订失败，请稍后重试',
						icon: 'none',
						duration: 2000
					});
				}
			},
			async reserve(courtIndex, timePeriodId) {
				if (courtIndex === null) {
					console.error('请选择一个场馆');
					uni.showToast({
						title: '请选择一个场馆',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				const confirmResult = await uni.showModal({
					title: '确认预约',
					content: `您选中了 ${courtIndex + 1} 号场地，是否确定预约？`,
					confirmText: '是',
					cancelText: '否'
				});
				if (confirmResult.confirm) {
					try {
						const response = await reserve1(timePeriodId, courtIndex);
						console.log('预定成功:', response);
						//找出response中的orderSn
						const orderSn = response.data.orderSn;
						console.log('orderSn:', orderSn); // 打印 orderSn 进行检查
						// 跳转到订单页面并传递 orderSn
						uni.navigateTo({
							url: `/pages/book/order?orderSn=${orderSn}`
						});
						// 显示成功提示框
						uni.showToast({
							title: '预订成功！',
							icon: 'success',
							duration: 2000 // 提示框显示的时间，单位为毫秒
						});
						// 更新预定状态
						this.isReservedSuccess = true;
						// 显示新的弹出层
						this.isReservedSuccessPopup = true;
						// 刷新页面数据
						this.fetchBookData(this.id, this.selectedDate);
						// 更新场馆预订状态
						this.bookedList[courtIndex] = 1;
						// 关闭弹出层
						this.show = false;
					} catch (error) {
						console.error('预定失败:', message);
						// 显示失败提示框
						uni.showToast({
							title: '预订失败，请稍后重试',
							icon: 'none',
							duration: 2000
						});
					}
				}
			},
			closeReservedSuccessPopup() {
				this.isReservedSuccessPopup = false;
			},
		}
	};
</script>

<style>
	.booking-container {
		width: 100%;
		overflow-x: auto;
	}

	.booking-table {
		margin-top: 10rpx;
		width: 100%;
		border-collapse: collapse;
		display: flex;
		flex-direction: column;
		line-height: 18rpx;
		/* 去除行内元素默认行高 */
	}

	.booking-table thead,
	.booking-table tbody {
		display: flex;
		flex-direction: column;
		width: 100%;
		margin-bottom: 10px;
	}

	.booking-table tr {
		display: flex;
		width: 100%;
	}

	.booking-table th,
	.booking-table td {
		flex: 1;
		text-align: center;
		/* padding: 5px; */
		font-size: 12px;
		box-sizing: border-box;

	}

	.booking-table td.today-cell {
		background-color: #0b95ff;
		font-weight: bold;
		border-radius: 20rpx;
	}

	.month-header {
		text-align: center;
	}

	.month-display {
		font-size: 12px;
		font-weight: bold;
		margin-left: 6px;
		margin-right: 6px;
		margin-top: 0px;
	}

	.day-display {
		margin-top: 3px;
		font-size: 9px;
		color: #999;
		white-space: nowrap;
	}

	.weekday-display {
		font-size: 12px;
		color: #333;
		font-weight: 600;
		margin-top: 3px;
	}

	.time-column {
		min-width: 30px;
	}

	.top-border {
		border-top: 1px solid #ccc;
	}

	.bottom-border {
		border-bottom: 1px solid #ccc;
	}

	.expired {
		color: #fff;
		background-color: #808080;
		font-size: 12px;
		border-radius: 8rpx;
		position: relative;
		/* box-shadow: 0px 0px 5px 0px; */
	}

	.center-text {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		height: 100%;
	}

	.booked {
		color: #C00000;
		background-color: #fff;
		position: relative;
		border-radius: 8rpx;
		box-shadow: 0px 0px 5px 0px;
	}

	.available {
		color: #fff;
		background-color: #0b95ff;
		position: relative;
		font-size: 14px;
		border-radius: 8rpx;
		/* background-color: #5e99fb; */
		/* box-shadow: 0px 0px 5px 0px; */
		/* padding: 1px; */
	}

	.loadData {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80vh;
	}

	.flex {
		display: flex;
	}

	.content-col {
		margin-left: auto;
		margin-right: auto;
	}

	/* .justify-start {
		/* justify-content: flex-start; 
	}

	.bg-white {
		background-color: white;
		color: darkGray;
	} */

	.selectedDate {
		background: #5e99fb;
		color: #fff;
	}

	.selectedDate .tipsText {
		color: #fff;
	}

	.weeks {
		font-size: 32rpx;
		font-weight: 500;
		line-height: 45rpx;
		color: #1a1b1c;
	}

	.margin-top-sm {
		margin-top: 15px;
	}

	.leftcontainer {
		border-radius: 2rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		align-items: center;
		text-align: center;
		box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
		/* border: 1px solid #5e99fb; */
		margin-left: 1px;
		padding-right: 1px;
		margin-right: 6px;
		position: relative;
		/* background-color: aqua; */
	}

	.ev-fc-start {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		position: relative;
	}

	.chuizhijuz {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.classTimeText {
		align-self: center;
		font-size: 20rpx;
		font-weight: 400;
		line-height: 28rpx;
		color: #4d5560;
	}

	.time-text {
		position: absolute;
		font-size: 11px;
		color: white;
		width: 100%;
		text-align: center;
	}

	.start-time {
		top: 2px;
	}

	.end-time {
		bottom: 2px;
	}

	.date-columns-container {
		display: flex;
		width: 100%;
		justify-content: space-between;
		display: inline-block
			/* 让每列水平等距排列在页面上 */
	}

	.date-column {
		/* flex: 1; */
		flex: 0 0 11.10%;
		/* 7天每列分配% */
		/* flex: 0 0 auto; /* 不允许弹性伸缩 */
		width: 100%;
		/* height: 100%; */
		margin: 0 4px;
		/* justify-content: space-between; */
		/* 可以根据需要调整列之间的间距 */
	}

	/* 定义 uView 风格的骨架屏动画 */
	@keyframes uview-skeleton-shimmer {
		0% {
			background-position: -200% 0;
		}

		100% {
			background-position: 200% 0;
		}
	}


	.skeleton-animation {
		background: #f2f2f2;
		/* 基础背景色，匹配图片淡灰色 */
		background-image: linear-gradient(to right, #f2f2f2 0%, #e6e6e6 20%, #f2f2f2 40%, #f2f2f2 100%);
		/* 线性渐变，模拟光影流动，颜色匹配图片 */
		background-size: 200% 100%;
		border-radius: 8rpx;
		margin: 10px 2px;
		animation: uview-skeleton-shimmer 1.5s infinite linear;
		/* 应用动画，保持流光效果 */
	}

	/* 弹出层样式 */
	.popup-content {
		padding: 20px;
		/* z-index: 100; */
	}

	.court-list {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	.court-item {
		width: calc((100% - 7 * 10px) / 8);
		height: 36px;
		/* background-color: #0b95ff; */
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 12px;
		border-radius: 4px;
	}

	.court-item.booked {
		background-color: #C00000;
		color: white;
	}

	.court-item.available {
		background-color: #0b95ff;
		color: white;
	}

	.court-item.selected {
		background-color: #87CEEB;
		color: white;
	}

	.button-container {
		display: flex;
		justify-content: space-around;
		margin-top: 16px;
	}

	.court-item.selected {
		background-color: #87CEEB !important;
		/* 选中状态的颜色 */
	}

	.success-info {
		text-align: center;
		margin-bottom: 20px;
	}

	.success-popup-content {
		padding: 20px;
		text-align: center;
	}

	.success-info {
		margin-bottom: 20px;
		font-weight: 600;
	}

	.info-row {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-bottom: 20px;
		padding: 10px 0;
		border-bottom: 1px solid #eee;
	}

	.info-item {
		display: flex;
		align-items: center;
		margin: 5px 0;
		flex: 1 1 50%;
		/* 两列布局 */
		min-width: 50%;
	}

	.info-label {
		font-weight: 600;
		color: #333;
		font-size: 14px;
		margin-right: 5px;
		margin-left: 15px;
	}

	.info-value {
		/* color: #555555; */
		font-size: 14px;
		/* font-weight: 600; */
	}

	/* 小屏幕适配 */
	@media (max-width: 375px) {
		.info-item {
			flex: 1 1 100%;
		}
	}
</style>